﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@using System.Threading
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudTable ServerData="ServerReload" Dense="true" Hover="true"
    LoadingContent="@(useLoadingContentBody ? null : loadingContent)"
    LoadingContentBody="@(useLoadingContentBody ? loadingContentBody : null)">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
    </ToolBarContent>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="nr_field" T="Element">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="sign_field" T="Element">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="name_field" T="Element">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="position_field" T="Element">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="mass_field" T="Element">Molar mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <NoRecordsContent>
        <MudText>No records found</MudText>
    </NoRecordsContent>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>
<MudSwitch @bind-Value="@useLoadingContentBody">Use Loading Content Body</MudSwitch>

@code {
    private bool useLoadingContentBody = true;

    private readonly RenderFragment loadingContent = @<MudSkeleton/>;
    private readonly RenderFragment loadingContentBody = @<text>
        @for (int r = 0; r < 4; r++) // 4 fake rows
        {
            <MudTr>
                @for (int c = 0; c < 5; c++) // 5 columns as above
                {
                    <MudTd><MudSkeleton/></MudTd>
                }
            </MudTr>
        }
    </text>;

    /// <summary>
    /// Here we simulate a perpetual loading for the purpose of the example.
    /// </summary>
    private async Task<TableData<Element>> ServerReload(TableState state, CancellationToken token)
    {
        while (!token.IsCancellationRequested)
        {
            await Task.Delay(1000, token);
        }
        return new TableData<Element>() { TotalItems = 0, Items = Enumerable.Empty<Element>() };
    }
}


